import { BaseEdge, ExtensionCategory, Graph, GraphData, GraphEvent, register, treeToGraphData } from "@antv/g6";
import { useCallback, useEffect, useRef } from "react";
import { treeData } from "./qfg4data";

class PolylineEdge extends BaseEdge {
  getKeyPath(attributes) {
    const [sourcePoint, targetPoint] = this.getEndpoints(attributes);

    return [
      ["M", sourcePoint[0], sourcePoint[1]],
      ["L", sourcePoint[0] + 40, sourcePoint[1]],
      ["L", targetPoint[0] - 40, targetPoint[1]],
      ["L", targetPoint[0], targetPoint[1]],
    ] as ReturnType<InstanceType<typeof BaseEdge>["getKeyPath"]>;
  }
}

register(ExtensionCategory.EDGE, "custom-polyline", PolylineEdge);

const ChartQfg2 = () => {
  const ref = useRef<HTMLDivElement & { graph?: Graph }>(null);

  const getData = useCallback(() => {
    const graph = ref.current.graph;

    let gd = {
      nodes: [
        // { id: "root", label: "根节点" } as any
      ],
      edges: [
        { source: "t11", target: "t3" },
        { source: "t12", target: "t3" },
        { source: "t13", target: "t3" },
        { source: "t14", target: "t3" },
        // ===
        { source: "d322", target: "t4", style: { visibility: "hidden" } },
        { source: "d322", target: "t5", style: { visibility: "hidden" } },

        { source: "t43", target: "t6", style: { visibility: "hidden" } },
        { source: "t43", target: "t7", style: { visibility: "hidden" } },
        { source: "t43", target: "t8", style: { visibility: "hidden" } },
      ],
      combos: [],
    } as GraphData;
    treeData.map((v) => {
      const d = treeToGraphData(v, {
        getNodeData: (datum, depth) => {
          if (!datum.style) datum.style = {};
          // datum.style.collapsed = depth >= 2;
          if (!datum.children) return datum;
          const { children, ...restDatum } = datum;
          return {
            ...restDatum,
            children: children.map((child) => child.id),
          } as any;
        },
      });
      gd.nodes.push(...d.nodes);
      gd.edges.push(...d.edges);
    });

    graph.clear();
    graph.setData(gd);
    graph.once(GraphEvent.AFTER_RENDER, () => {
      graph.fitView();
    });
  }, []);

  useEffect(() => {
    const graph = new Graph({
      container: ref.current,
      background: "#F2F7FA",
      autoFit: "center",
      padding: 26,
      animation: false,
      behaviors: ["zoom-canvas", "drag-canvas"],

      node: {
        style: {
          iconText: (d: any) => d.id,
          iconFontSize: 12,
          labelText: (d: any) => d.label,
          labelBackground: true,
          labelPlacement: function (d) {
            return "bottom";
          },
          ports: [{ placement: "right" }, { placement: "left" }],
        },
        palette: {
          type: "group",
          field: "shape",
        },
        animation: {
          enter: false,
        },
      },
      edge: {
        type: "custom-polyline",
        style: {
          endArrow: true,
        },
        animation: {
          enter: false,
        },
      },
      layout: {
        type: "antv-dagre",
        ranksep: 40,
        nodesep: 15,
        rankdir: "LR",
      },
    });
    ref.current.graph = graph;
    graph.render();

    getData();
  }, []);

  return (
    <>
      <h2>全覆盖：6-部门预算预算执行总体情况</h2>
      <div ref={ref} style={{ width: "100%", minHeight: 600 }}></div>
    </>
  );
};

export default ChartQfg2;
